<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 Flexbox布局</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            color: #333;
        }
        h1 {
            color: #0066cc;
            border-bottom: 2px solid #0066cc;
            padding-bottom: 10px;
        }
        h2 {
            color: #0099cc;
            margin-top: 30px;
        }
        h3 {
            color: #00aadd;
        }
        .example {
            background-color: #f5f5f5;
            border-left: 4px solid #0066cc;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }
        .code {
            background-color: #f8f8f8;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin: 15px 0;
            overflow-x: auto;
            font-family: Consolas, Monaco, 'Andale Mono', monospace;
        }
        .note {
            background-color: #ffffd9;
            border-left: 4px solid #ffcc00;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }
        .preview {
            border: 1px solid #ddd;
            padding: 20px;
            margin: 15px 0;
            border-radius: 4px;
            background-color: #fff;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px 12px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        nav {
            background-color: #f8f8f8;
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        nav a {
            margin-right: 15px;
            text-decoration: none;
            color: #0066cc;
        }
        nav a:hover {
            text-decoration: underline;
        }
        /* 演示用样式 */
        .flex-demo {
            margin: 20px 0;
            background-color: #f0f0f0;
            padding: 10px;
            border-radius: 4px;
        }
        .flex-container {
            display: flex;
            background-color: #f8f8f8;
            border: 1px solid #ddd;
            padding: 10px;
            margin-bottom: 15px;
        }
        .flex-item {
            background-color: #0099cc;
            color: white;
            padding: 10px;
            margin: 5px;
            text-align: center;
            border-radius: 4px;
        }
        .flex-direction-row {
            flex-direction: row;
        }
        .flex-direction-column {
            flex-direction: column;
        }
        .flex-wrap-nowrap {
            flex-wrap: nowrap;
        }
        .flex-wrap-wrap {
            flex-wrap: wrap;
        }
        .justify-content-start {
            justify-content: flex-start;
        }
        .justify-content-center {
            justify-content: center;
        }
        .justify-content-end {
            justify-content: flex-end;
        }
        .justify-content-between {
            justify-content: space-between;
        }
        .justify-content-around {
            justify-content: space-around;
        }
        .align-items-start {
            align-items: flex-start;
        }
        .align-items-center {
            align-items: center;
        }
        .align-items-end {
            align-items: flex-end;
        }
        .align-items-stretch {
            align-items: stretch;
        }
        .align-self-start {
            align-self: flex-start;
        }
        .align-self-center {
            align-self: center;
        }
        .align-self-end {
            align-self: flex-end;
        }
        .flex-grow-1 {
            flex-grow: 1;
        }
        .flex-grow-2 {
            flex-grow: 2;
        }
        .flex-shrink-1 {
            flex-shrink: 1;
        }
        .flex-shrink-0 {
            flex-shrink: 0;
        }
        .flex-basis-auto {
            flex-basis: auto;
        }
        .flex-basis-100 {
            flex-basis: 100px;
        }
        .order-1 {
            order: 1;
        }
        .order-2 {
            order: 2;
        }
        .order-3 {
            order: 3;
        }
        .tall-item {
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <nav>
        <a href="index.html">首页</a>
        <a href="css3-selectors.html">CSS选择器</a>
        <a href="css3-box-model.html">盒模型</a>
        <a href="css3-layout-flexbox.html">Flexbox布局</a>
        <a href="css3-layout-grid.html">Grid布局</a>
        <a href="css3-colors-gradients.html">颜色与渐变</a>
        <a href="css3-transforms.html">变换</a>
        <a href="css3-transitions-animations.html">过渡与动画</a>
        <a href="css3-responsive.html">响应式设计</a>
    </nav>

    <h1>CSS3 Flexbox布局</h1>
    
    <section>
        <h2>Flexbox 布局概述</h2>
        <div class="example">
            <p>Flexbox（弹性盒子）是 CSS3 引入的一种新的布局模式，专为创建更加灵活和强大的页面布局而设计。它允许容器能够改变其子项目的宽度、高度和顺序，以最佳方式填充可用空间。</p>
            
            <p>Flexbox 布局特别适合于：</p>
            <ul>
                <li>在不同屏幕尺寸下保持一致的布局</li>
                <li>对齐和分配容器内元素的空间</li>
                <li>控制元素的顺序，而不必修改 HTML 结构</li>
                <li>创建复杂但灵活的网格结构</li>
            </ul>
            
            <div class="code">
                /* 创建一个 flex 容器 */
                .container {
                    display: flex;
                }
                
                /* 或者创建一个行内 flex 容器 */
                .container {
                    display: inline-flex;
                }
            </div>
        </div>
        
        <div class="note">
            <p><strong>重要概念：</strong> Flexbox 布局基于两个主要组件：flex 容器（父元素）和 flex 项目（子元素）。当一个元素设置为 <code>display: flex</code> 或 <code>display: inline-flex</code> 时，它成为 flex 容器，其直接子元素自动成为 flex 项目。</p>
        </div>
    </section>
    
    <section>
        <h2>Flex 容器属性</h2>
        <div class="example">
            <h3>flex-direction（主轴方向）</h3>
            <div class="code">
                flex-direction: row;            /* 默认值，从左到右 */
                flex-direction: row-reverse;    /* 从右到左 */
                flex-direction: column;         /* 从上到下 */
                flex-direction: column-reverse; /* 从下到上 */
            </div>
            
            <div class="flex-demo">
                <p><strong>row（默认）：</strong></p>
                <div class="flex-container flex-direction-row">
                    <div class="flex-item">1</div>
                    <div class="flex-item">2</div>
                    <div class="flex-item">3</div>
                </div>
                
                <p><strong>column：</strong></p>
                <div class="flex-container flex-direction-column">
                    <div class="flex-item">1</div>
                    <div class="flex-item">2</div>
                    <div class="flex-item">3</div>
                </div>
            </div>
            
            <h3>flex-wrap（换行方式）</h3>
            <div class="code">
                flex-wrap: nowrap;       /* 默认值，不换行 */
                flex-wrap: wrap;         /* 在需要时换行 */
                flex-wrap: wrap-reverse; /* 在需要时换行，但方向相反 */
            </div>
            
            <div class="flex-demo">
                <p><strong>nowrap（默认）：</strong></p>
                <div class="flex-container flex-wrap-nowrap" style="width: 250px;">
                    <div class="flex-item">1</div>
                    <div class="flex-item">2</div>
                    <div class="flex-item">3</div>
                    <div class="flex-item">4</div>
                    <div class="flex-item">5</div>
                </div>
                
                <p><strong>wrap：</strong></p>
                <div class="flex-container flex-wrap-wrap" style="width: 250px;">
                    <div class="flex-item">1</div>
                    <div class="flex-item">2</div>
                    <div class="flex-item">3</div>
                    <div class="flex-item">4</div>
                    <div class="flex-item">5</div>
                </div>
            </div>
            
            <h3>flex-flow（方向和换行的简写）</h3>
            <div class="code">
                flex-flow: row nowrap;     /* 默认值 */
                flex-flow: column wrap;    /* 纵向排列，需要时换行 */
                flex-flow: row-reverse wrap-reverse; /* 从右到左，反向换行 */
            </div>
            
            <h3>justify-content（主轴对齐方式）</h3>
            <div class="code">
                justify-content: flex-start;    /* 默认值，项目靠主轴起点对齐 */
                justify-content: flex-end;      /* 项目靠主轴终点对齐 */
                justify-content: center;        /* 项目在主轴上居中对齐 */
                justify-content: space-between; /* 项目均匀分布，首尾项目贴边 */
                justify-content: space-around;  /* 项目均匀分布，首尾项目周围有空间 */
                justify-content: space-evenly;  /* 项目和空间均匀分布（较新属性） */
            </div>
            
            <div class="flex-demo">
                <p><strong>flex-start（默认）：</strong></p>
                <div class="flex-container justify-content-start">
                    <div class="flex-item">1</div>
                    <div class="flex-item">2</div>
                    <div class="flex-item">3</div>
                </div>
                
                <p><strong>center：</strong></p>
                <div class="flex-container justify-content-center">
                    <div class="flex-item">1</div>
                    <div class="flex-item">2</div>
                    <div class="flex-item">3</div>
                </div>
                
                <p><strong>space-between：</strong></p>
                <div class="flex-container justify-content-between">
                    <div class="flex-item">1</div>
                    <div class="flex-item">2</div>
                    <div class="flex-item">3</div>
                </div>
                
                <p><strong>space-around：</strong></p>
                <div class="flex-container justify-content-around">
                    <div class="flex-item">1</div>
                    <div class="flex-item">2</div>
                    <div class="flex-item">3</div>
                </div>
            </div>
            
            <h3>align-items（交叉轴对齐方式）</h3>
            <div class="code">
                align-items: stretch;      /* 默认值，项目拉伸填满容器高度 */
                align-items: flex-start;   /* 项目靠交叉轴起点对齐 */
                align-items: flex-end;     /* 项目靠交叉轴终点对齐 */
                align-items: center;       /* 项目在交叉轴上居中对齐 */
                align-items: baseline;     /* 项目的第一行文字基线对齐 */
            </div>
            
            <div class="flex-demo">
                <p><strong>stretch（默认）：</strong></p>
                <div class="flex-container align-items-stretch" style="height: 100px;">
                    <div class="flex-item" style="height: auto;">1</div>
                    <div class="flex-item" style="height: auto;">2</div>
                    <div class="flex-item" style="height: auto;">3</div>
                </div>
                
                <p><strong>flex-start：</strong></p>
                <div class="flex-container align-items-start" style="height: 100px;">
                    <div class="flex-item">1</div>
                    <div class="flex-item tall-item">2</div>
                    <div class="flex-item">3</div>
                </div>
                
                <p><strong>center：</strong></p>
                <div class="flex-container align-items-center" style="height: 100px;">
                    <div class="flex-item">1</div>
                    <div class="flex-item tall-item">2</div>
                    <div class="flex-item">3</div>
                </div>
                
                <p><strong>flex-end：</strong></p>
                <div class="flex-container align-items-end" style="height: 100px;">
                    <div class="flex-item">1</div>
                    <div class="flex-item tall-item">2</div>
                    <div class="flex-item">3</div>
                </div>
            </div>
            
            <h3>align-content（多行对齐方式）</h3>
            <div class="code">
                align-content: stretch;       /* 默认值，行拉伸填满容器 */
                align-content: flex-start;    /* 行靠交叉轴起点对齐 */
                align-content: flex-end;      /* 行靠交叉轴终点对齐 */
                align-content: center;        /* 行在交叉轴上居中对齐 */
                align-content: space-between; /* 行均匀分布，首尾行贴边 */
                align-content: space-around;  /* 行均匀分布，首尾行周围有空间 */
            </div>
            <p>注意：align-content 属性只在多行 flex 容器中有效（即 flex-wrap 设置为 wrap 或 wrap-reverse）。</p>
        </div>
        
        <div class="note">
            <p><strong>主轴与交叉轴：</strong> 在 Flexbox 布局中，有两个轴：主轴（由 flex-direction 定义）和交叉轴（垂直于主轴）。理解这两个轴对于掌握 Flexbox 布局至关重要。</p>
        </div>
    </section>
    
    <section>
        <h2>Flex 项目属性</h2>
        <div class="example">
            <h3>order（排序）</h3>
            <div class="code">
                order: 0;  /* 默认值 */
                order: 1;  /* 数值越小，排列越靠前 */
                order: -1; /* 负值可用于将项目移到最前面 */
            </div>
            
            <div class="flex-demo">
                <p><strong>使用 order 改变项目顺序：</strong></p>
                <div class="flex-container">
                    <div class="flex-item order-3" style="background-color: #ff9900;">1 (order: 3)</div>
                    <div class="flex-item order-1" style="background-color: #33cc33;">2 (order: 1)</div>
                    <div class="flex-item order-2" style="background-color: #ff3366;">3 (order: 2)</div>
                </div>
            </div>
            
            <h3>flex-grow（放大比例）</h3>
            <div class="code">
                flex-grow: 0; /* 默认值，不放大 */
                flex-grow: 1; /* 按比例分配剩余空间 */
                flex-grow: 2; /* 比例值为 1 的项目的 2 倍 */
            </div>
            
            <div class="flex-demo">
                <p><strong>不同的 flex-grow 值：</strong></p>
                <div class="flex-container">
                    <div class="flex-item flex-grow-1">1 (flex-grow: 1)</div>
                    <div class="flex-item flex-grow-2">2 (flex-grow: 2)</div>
                    <div class="flex-item" style="flex-grow: 0;">3 (flex-grow: 0)</div>
                </div>
            </div>
            
            <h3>flex-shrink（缩小比例）</h3>
            <div class="code">
                flex-shrink: 1; /* 默认值，按比例缩小 */
                flex-shrink: 0; /* 不缩小 */
                flex-shrink: 2; /* 比例值为 1 的项目的 2 倍速度缩小 */
            </div>
            
            <div class="flex-demo">
                <p><strong>不同的 flex-shrink 值（容器宽度不足时）：</strong></p>
                <div class="flex-container" style="width: 250px;">
                    <div class="flex-item flex-shrink-1" style="width: 100px;">1 (shrink: 1)</div>
                    <div class="flex-item flex-shrink-0" style="width: 100px;">2 (shrink: 0)</div>
                    <div class="flex-item flex-shrink-1" style="width: 100px;">3 (shrink: 1)</div>
                </div>
            </div>
            
            <h3>flex-basis（初始大小）</h3>
            <div class="code">
                flex-basis: auto; /* 默认值，使用项目的宽度或高度 */
                flex-basis: 0;    /* 忽略项目的尺寸 */
                flex-basis: 100px; /* 指定项目的初始大小 */
                flex-basis: 50%;   /* 可以使用百分比 */
            </div>
            
            <div class="flex-demo">
                <p><strong>不同的 flex-basis 值：</strong></p>
                <div class="flex-container">
                    <div class="flex-item flex-basis-auto">auto</div>
                    <div class="flex-item flex-basis-100">100px</div>
                    <div class="flex-item" style="flex-basis: 50%;">50%</div>
                </div>
            </div>
            
            <h3>flex（flex-grow、flex-shrink 和 flex-basis 的简写）</h3>
            <div class="code">
                flex: 0 1 auto; /* 默认值 */
                flex: 1;        /* 等同于 flex: 1 1 0% */
                flex: auto;     /* 等同于 flex: 1 1 auto */
                flex: none;     /* 等同于 flex: 0 0 auto */
                flex: 2 2 20%;  /* 自定义值 */
            </div>
            <p>flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写形式。推荐使用这种简写形式，而不是单独设置各个属性。</p>
            
            <h3>align-self（单个项目对齐方式）</h3>
            <div class="code">
                align-self: auto;       /* 默认值，继承父容器的 align-items 值 */
                align-self: flex-start; /* 项目靠交叉轴起点对齐 */
                align-self: flex-end;   /* 项目靠交叉轴终点对齐 */
                align-self: center;     /* 项目在交叉轴上居中对齐 */
                align-self: stretch;    /* 项目拉伸填满容器高度 */
                align-self: baseline;   /* 项目的第一行文字基线对齐 */
            </div>
            
            <div class="flex-demo">
                <p><strong>使用 align-self 单独对齐项目：</strong></p>
                <div class="flex-container" style="height: 100px; align-items: flex-start;">
                    <div class="flex-item">1</div>
                    <div class="flex-item align-self-center">2 (center)</div>
                    <div class="flex-item align-self-end">3 (end)</div>
                    <div class="flex-item" style="align-self: stretch; height: auto;">4 (stretch)</div>
                </div>
            </div>
        </div>
        
        <div class="note">
            <p><strong>最佳实践：</strong> 使用 <code>flex: 1;</code> 是创建等分列布局的简便方法。对于固定宽度的项目，可以使用 <code>flex: 0 0 auto;</code> 或 <code>flex: none;</code>。</p>
        </div>
    </section>
    
    <section>
        <h2>Flexbox 布局实例</h2>
        <div class="example">
            <h3>导航栏布局</h3>
            <div class="code">
                .navbar {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 10px 20px;
                    background-color: #333;
                    color: white;
                }
                
                .logo {
                    flex: 0 0 auto;
                }
                
                .nav-links {
                    display: flex;
                    gap: 20px;
                }
                
                .nav-links a {
                    color: white;
                    text-decoration: none;
                }
                
                .nav-button {
                    flex: 0 0 auto;
                }
            </div>
            
            <h3>卡片网格布局</h3>
            <div class="code">
                .card-grid {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 20px;
                }
                
                .card {
                    flex: 0 0 calc(33.333% - 20px);
                    padding: 20px;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                }
                
                /* 响应式调整 */
                @media (max-width: 768px) {
                    .card {
                        flex: 0 0 calc(50% - 20px);
                    }
                }
                
                @media (max-width: 480px) {
                    .card {
                        flex: 0 0 100%;
                    }
                }
            </div>
            
            <h3>圣杯布局（三列布局，固定宽度侧边栏）</h3>
            <div class="code">
                .holy-grail {
                    display: flex;
                    min-height: 100vh;
                }
                
                .sidebar-left {
                    flex: 0 0 200px;
                    background-color: #f0f0f0;
                }
                
                .main-content {
                    flex: 1;
                    padding: 20px;
                }
                
                .sidebar-right {
                    flex: 0 0 200px;
                    background-color: #f0f0f0;
                }
                
                /* 响应式调整 */
                @media (max-width: 768px) {
                    .holy-grail {
                        flex-direction: column;
                    }
                    
                    .sidebar-left, .sidebar-right {
                        flex: 0 0 auto;
                    }
                }
            </div>
            
            <h3>垂直居中布局</h3>
            <div class="code">
                .center-container {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 100vh;
                }
                
                .centered-box {
                    padding: 30px;
                    background-color: white;
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                }
            </div>
        </div>
    </section>
    
    <section>
        <h2>Flexbox 与其他布局方法的比较</h2>
        <table>
            <tr>
                <th>特性</th>
                <th>Flexbox</th>
                <th>Grid</th>
                <th>传统布局（浮动/定位）</th>
            </tr>
            <tr>
                <td>一维/二维布局</td>
                <td>一维（行或列）</td>
                <td>二维（行和列）</td>
                <td>无明确维度概念</td>
            </tr>
            <tr>
                <td>内容优先</td>
                <td>是（内容决定布局）</td>
                <td>否（布局决定内容）</td>
                <td>否</td>
            </tr>
            <tr>
                <td>对齐能力</td>
                <td>强大</td>
                <td>强大</td>
                <td>有限</td>
            </tr>
            <tr>
                <td>响应式设计</td>
                <td>非常适合</td>
                <td>非常适合</td>
                <td>需要额外工作</td>
            </tr>
            <tr>
                <td>浏览器支持</td>
                <td>良好（IE11+）</td>
                <td>中等（IE不支持）</td>
                <td>几乎所有浏览器</td>
            </tr>
            <tr>
                <td>最适合的用途</td>
                <td>导航栏、卡片列表、单行/单列布局</td>
                <td>整页布局、复杂网格系统</td>
                <td>简单布局、特定元素定位</td>
            </tr>
        </table>
    </section>
    
    <section>
        <h2>Flexbox 最佳实践</h2>
        <ul>
            <li>使用 <code>flex: 1;</code> 创建灵活的等分布局</li>
            <li>使用 <code>flex-direction